<template>
  <div class="container">
    <transition :name="type">
      <router-view></router-view>
    </transition>
    <router-view name="footer"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      type: 'fade'
    }
  },
  watch: {
    $route (newVal, oldVal) {
      console.log('newVal', newVal)
      if (newVal.name === 'detail') {
        this.type = 'slide'
      } else {
        this.type = 'fade'
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.container {
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  .box {
    @include flex();
    @include rect(100%, 100%);
    @include overflow(auto);
    @include flexbox();
    @include flex-direction(column);
    .header {
      @include rect(100%, auto);
    }
      .content {
      @include flex();
      @include rect(100%, auto);
      @include overflow(auto);
    }
  }
  .footer {
    @include rect(100%, 50px);
    font-size: 12px;
    color: #666;
    background:white;
    ul {
      @include rect(100%, 100%);
      @include flexbox();
      &.router-link-exact-active,.router-link-active {
          @include color(brown);
          font-size: 15px;
        }
      span {
        @include font-size(22px);
      }
      li {
        @include flex();
        @include rect(auto, 100%);
        @include flexbox();
        @include flex-direction(column);
        @include justify-content();
        @include align-items();
      }
    }
  }
}
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  transition: all .5s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-leave-active {
  transition: all 0s;
}
.fade-leave-to {
  opacity: 0;
}

.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transition: all .5s;
}
.slide-enter-to {
  transform: translateX(0);
}
.slide-leave {
  transform: translateX(0);
}
.slide-leave-active {
  transition: all 0s;
}
.slide-leave-to {
  transform: translateX(-100%)
}
</style>
